<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <div class="container">
    <div class="pointer"></div>
    <div class="item">
      <img src="https://picsum.photos/id/371/400/400" alt="" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/372/400/400" alt="" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/373/400/400" alt="" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/374/400/400" alt="" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/375/400/400" alt="" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/376/400/400" alt="" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/377/400/400" alt="" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/378/400/400" alt="" />
    </div>
    <div class="item">
      <img src="https://picsum.photos/id/379/400/400" alt="" />
    </div>
  </div>
  <script type="text/javascript">
    const imgs = document.querySelectorAll('.container img');
    const pointer = document.querySelector('.pointer');

    for (const img of imgs) {
      img.onmouseenter = () => {
        pointer.style.setProperty('--x', img.offsetLeft + 'px');
        pointer.style.setProperty('--y', img.offsetTop + 'px');
        pointer.style.setProperty('--s', img.offsetWidth + 'px');
      };
    }

  </script>
</body>

</html>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: #000;
  }

  .container {
    display: grid;
    width: 90%;
    margin: 80px auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }

  .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
  }

  .container {
    position: relative;
  }

  .pointer {
    position: absolute;
    --l: 30px;
    /* 长度 */
    --g: 15px;
    /* 间隔 */
    --t: 3px;
    /* 粗细 */
    --s: 246px;
    /* 框住的元素大小 */
    --x: 0px;
    --y: 0px;
    width: calc(var(--s) + var(--g) * 2);
    height: calc(var(--s) + var(--g) * 2);
    border: var(--t) solid #fff;
    left: calc(var(--x) - var(--g));
    top: calc(var(--y) - var(--g));
    transition: 0.5s;
    --mask: conic-gradient(at var(--l) var(--l),
        transparent 75%,
        red 75%) 0 0 / calc(100% - var(--l)) calc(100% - var(--l));
    mask: var(--mask);
    -webkit-mask: var(--mask);
  }
</style>